<template>
  <div class="balance-wrapper">
    <div class="user-com-title">{{$t('page.merchant.title')}}
    </div>
    <div class="btn-box">
      <span class="merchant_info">
        <span>{{ userInfo.merchant_info?.mer_name }}</span>
        <el-image :src="merchantLevel" class="icon-img" />
        <span> {{ $t("page.chat.credit") }} :{{ mer_credit }}</span>
        <span v-if="userInfo.fenxiao_code"> {{ $t("page.store.distribution") }} :{{ userInfo.fenxiao_code }}</span>
      </span>
      <el-badge :value="messageNum" class="item" :max="9" :hidden="messageNum===0">
        <el-button @click="chatVisible = true">{{$t("page.chat.customer")}}</el-button>
      </el-badge>
    </div>
    <div class="balance-box">
      <div class="flex">
        <div class="money-box" v-if="$auth.user">
          <div class="money-item">
            <span>{{$t('page.merchant.storeId')}}</span>
            <p>{{mer_id || 0}}</p>
          </div>
          <div class="money-item">
            <span>{{$t('page.merchant.followNum')}}</span>
            <p>{{care_count || 0}}</p>
          </div>
          <div class="money-item">
            <span>{{$t('page.merchant.accessNum')}}</span>
            <p>{{user_visit || 0}}</p>
          </div>
          <div class="money-item">
            <span>{{$t('page.user.Totalassets')}}($)</span>
            <p>{{userInfo.now_money || 0}}</p>
          </div>
          <div class="money-item">
            <span>{{$t('page.merchant.totalOrderAmount')}}($)：</span>
            <p>{{userInfo.total_recharge || 0}}</p>
          </div>
          <div class="money-item">
            <span>{{$t('page.merchant.totalProfitOfOrders')}}($)：</span>
            <p>{{userInfo.total_consume || 0}}</p>
          </div>
          <div class="money-item">
            <span>{{$t('page.merchant.todayAmount')}}($)：</span>
            <p>{{userInfo.total_consume || 0}}</p>
          </div>
          <div class="money-item">
            <span>{{$t('page.merchant.todayProfit')}}($)：</span>
            <p>{{userInfo.total_consume || 0}}</p>
          </div>
        </div>
        <div class="level-item" v-if="levelInfo">
          <el-image class="icon" :src="levelInfo.icon" />
          <div>{{ levelInfo.category_name }}</div>
          <div>${{ levelInfo.category_threshold }}</div>
          <div>{{$t('page.users.merchantLevel.uploadLimt')}}{{ levelInfo.category_max_prod }}</div>
          <div>{{$t('page.users.merchantLevel.timeSize')}}{{userInfo.merchant_info?.mer_daynum || 365 }}{{$t('page.users.merchantLevel.day')}}</div>
          <div>{{$t('page.users.merchantLevel.profit')}}{{ userInfo.merchant_info.spread_ratio }}%</div>

        </div>
      </div>
      <div class="tab-box">
        <div class="hd clearfix">
          <div class="hd-item" :class="{on:tabCur == item.key}" v-for="(item,index) in tabList" :key="index" @click="bindTab(item)">{{item.title}}</div>
        </div>
        <div v-if="tabCur < 3" class="order-list">
          <ul>
            <li v-for="(item,index) in list" :key="index">
              <div class="bd">
                <div class="order-txt">
                  {{$t('page.users.orderList.date')}}: {{item.create_time}}
                  <nuxt-link class="mer_name" :to="{path:'/store',query:{id:item.mer_id}}">{{item.mer_name}}</nuxt-link>
                  <!-- <div style="color: red;">{{goods.is_refund==1? $t('page.users.userReturnList.refunding') :goods.is_refund==2? $t('page.index.partialrefund') :goods.is_refund==3? $t('page.index.fullrefund') :''}}</div> -->
                </div>
                <div class="content">
                  <div v-for="(goods, index) in item.orderProduct" :key="index">
                    <div v-if="item.activity_type === 2" class="goods-item">
                        <div class="img-box">
                          <img :src='(goods.cart_info.productAttr && goods.cart_info.productAttr.image) || goods.cart_info.product.image' alt="">
                          <span >{{$t('page.index.presale')}}</span>
                        </div>
                        <div class="info-txt">
                          <div class="title line2">{{goods.cart_info.product.store_name}}</div>
                          <div class="info" v-if="goods.cart_info.productAttr.sku">{{goods.cart_info.productAttr.sku}}</div>
                          <div class="price" v-if="goods.cart_info.productPresellAttr.presell_price">$ {{ goods.cart_info.productPresellAttr.presell_price }}</div>
                          <div class="price" v-else>$ {{ goods.cart_info.product.price }}</div>
                          <div class="develity_date">
                            <!--全款预售-->
                            <span v-if="goods.cart_info.productPresell.presell_type === 1">
                              {{$t('page.index.deliverytime')}}：{{ goods.cart_info.productPresell.delivery_type === 1 ? $t('page.index.asuccessfulpay') : $t('page.index.resaleends') }}{{ goods.cart_info.productPresell.delivery_day }}{{$t('page.index.days')}}
                            </span>
                            <!--定金预售-->
                            <span v-if="goods.cart_info.productPresell.presell_type === 2">
                              {{$t('page.index.deliverytime')}}：{{ goods.cart_info.productPresell.delivery_type === 1 ? $t('page.index.afterpayingthebalance') : $t('page.index.resaleends') }}{{ goods.cart_info.productPresell.delivery_day }}{{$t('page.index.days')}}
                            </span>
                          </div>
                        </div>
                        <div style="color: red;">{{goods.is_refund==1? $t('page.users.userReturnList.refunding') :goods.is_refund==2? $t('page.index.partialrefund') :goods.is_refund==3? $t('page.index.fullrefund') :''}}</div>
                        <span class="num">x{{ goods.product_num }}</span>
                    </div>
                    <div v-else class="goods-item">
                        <div class="img-box">
                          <img :src='(goods.cart_info.productAttr && goods.cart_info.productAttr.image) || goods.cart_info.product.image' alt="">
                        </div>
                        <div class="info-txt">
                          <div class="title line2">{{goods.cart_info.product.store_name}}</div>
                          <div class="info" v-if="goods.cart_info.productAttr.sku">{{goods.cart_info.productAttr.sku}}</div>
                          <div class="price" v-if="goods.cart_info.productAttr.price">$ {{ goods.cart_info.productAttr.price }}</div>
                          <div class="price" v-else>$ {{ goods.cart_info.product.price }}</div>

                        </div>
                        <div style="color: red;">{{goods.is_refund==1? $t('page.users.userReturnList.refunding') :goods.is_refund==2? $t('page.index.partialrefund') :goods.is_refund==3? $t('page.index.fullrefund') :''}}</div>
                        <span class="num">x{{ goods.product_num }}</span>
                    </div>

                  </div>
                </div>
              </div>
              <div class="foot">
                <p>{{ item.total_num || 0 }} {{$t('page.orderDetails.item')}} ，{{$t('page.users.orderList.totalPay')}} <span class="price">${{ item.pay_price }} </span>
                <span v-if="item.pay_postage > 0">({{$t('page.index.includingshipping')}}{{item.pay_postage}})</span>
                </p>
                <div class="btn-wrapper">
                  <div class="pay" v-if="tabCur === 0 || tabCur === 1 || tabCur === 2 " @click="goMerDetail(item)">{{$t('page.users.orderList.viewDetails')}}</div>
                  <div class="rest" v-if="tabCur === 0 && item.tidan == 2">{{$t('page.merchant.ytd')}}</div>
                  <div class="rest" v-else-if="tabCur === 0 && item.tidan == 1" @click="goTd(item)">{{$t('page.merchant.td')}}</div>
                  <div class="rest" v-if="tabCur === 0 || tabCur === 1 || tabCur === 2" @click="goCustomer(item)">{{$t("page.chat.customer")}}</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div v-else class="order-list">
          <div class="condition">
            <div>
              <label>{{$t('page.merchant.key')}}：</label>
              <el-input class="input" v-model="keyword" />
            </div>
            <div class="condition-price ml-20">
              <label>{{$t('page.goodsList.price')}}：</label>
              <el-input class="input" type="number" v-model="price_low"></el-input> - <el-input type="number" v-model="price_high" class="input"></el-input>
            </div>
            <el-button class="ml-20" @click="getList">{{ $t('page.merchant.query')  }}</el-button>
          </div>
          <div class="ml-20">
            <div class="flex">
              <label>{{$t('page.merchant.type')}}：</label>
              <div class="categorize-box">
                <div class="categorize-item" :class="categorize === '' ? 'active':''" @click="handleCategorize('')">
                  {{ $t("page.users.goodsCommentList.all") }}
                </div>
                <div class="categorize-item" v-for="item in category" :key="item.value" :class="categorize === item.value ? 'active':''" @click="handleCategorize(item.value)">
                  {{ item.label }}
                </div>
              </div>
            </div>
            <div class="flex">
              <label>{{$t('page.merchant.type2')}}：</label>
              <div class="bottom-categorize">
                <div class="classifier" v-for="item in categorizeList" :key="item.value" :class="currentCategory === item.value ? 'active':''" @click="handleIds(item.value)">
                  {{ item.label }}
                </div>
              </div>
            </div>
              <!-- <el-cascader
                v-model="currentCategory"
                :options="category"
                clearable
                :props="{ expandTrigger: 'hover' }"
              ></el-cascader> -->
          </div>
          <div>
            <div class="my-order-btn-box" v-if="tabCur == 4 || tabCur == 3">
              <div class="btn-box">
                <div><el-checkbox v-model="allSelect"  @change="selectAllChange" /> <span> select all  </span></div>
                <el-button v-if="tabCur == 3 && userInfo.merchant_info?.is_sj === 1" class="btn bg-color" @click="batchListing">{{ $t("page.merchant.batchListing") }}</el-button>
                <el-button  class="btn bg-color" @click="batchDelisting">{{ $t("page.merchant.batchDelisting") }}</el-button>
              </div>
            </div>
          </div>
          <ul>
            <li v-for="(goods,index) in list" :key="index">
              <div class="bd">
                <div class="content">
                  <div class="goods-item">
                      <el-checkbox v-if="goods.jj_status!=1"  class="checkbox" v-model="goods.checkbox" />
                      <div class="img-box">
                        <img :src='goods.image' alt="">
                      </div>
                      <div class="info-txt">
                        <div class="title line2">{{goods.store_name}}</div>
                        <div class="price" v-if="tabCur === 3">$ {{ goods.jh_price  || 0}}  &nbsp;&nbsp;&nbsp;&nbsp; {{ $t('page.goodsDetail.oldPrice') }}: $ {{ goods.price }}</div>
                        <div class="price" v-else>$ {{ goods.price || 0 }}</div>
                      </div>
                      <div style="color: red;">{{goods.is_refund==1? $t('page.users.userReturnList.refunding') :goods.is_refund==2? $t('page.index.partialrefund') :goods.is_refund==3? $t('page.index.fullrefund') :''}}</div>
                      <span class="num">x1</span>
                  </div>
                </div>
              </div>
              <div class="foot">
                <div class="btn-wrapper">
                  <div class="pay" v-if="tabCur === 3 && userInfo.merchant_info?.is_sj === 1" @click="handlebut(goods.product_id, 1,goods.jj_status)">{{goods.jj_status==1?'Already listed':goods.jj_status==2?'listing':''}}</div>
                  <div class="pay"  @click="handlebut(goods.product_id, 2,goods.jj_status)">{{$t('page.merchant.goodXj')}}</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="pages-box" v-if="total > 0">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="bindPageCur"
          :current-page.sync="currentPage"
          :pageSize="limit"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <div class="empty-box" v-if="total == 0">
      <img src="~/assets/images/noyue.png" alt="">
      <p>{{$t('page.index.empty')}}</p>
    </div>
    <el-dialog
      title="payPassword"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-input v-model="palyPwd" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="handtohuo">OK</el-button>
      </span>
    </el-dialog>
    <el-drawer
      :title="$t('page.merchant.orderInfo')"
      :visible.sync="drawer"
      direction="rtl"
      >
        <div class="drawer-box">
          <div v-for="(c, i) in drawerInfo" :key="i">
            <div class="mb-10">{{c.title}}</div>
            <div class="detail_item" v-for="(e, j) in c.list" :key="j">
              <span class="t1">{{ e.title }}：</span>
              <span class="t2">{{ e.value }}</span>
            </div>
          </div>
        </div>
    </el-drawer>
    <ChatItem
      v-if="$auth.user.service"
      :dialogVisible="chatVisible"
      :title="$auth.user.service.nickname"
      :role="2"
      :mer_id="$auth.user.service.mer_id"
      :uId="userUid"
      :userId="$auth.user.uid"
      @close="chatVisible = false" />
    <AgentItem
      v-if="$auth.user.spread_uid"
      :dialogVisible="agentChatVisible"
      :title="$t('page.chat.agentChat')"
      :mer_id="$auth.user.spread_uid"
      @close="agentChatVisible = false" />
  </div>
</template>
<script>
import { Message } from 'element-ui';
import ChatItem from "@/components/chat";
import AgentItem from '@/components/chat/agent.vue';
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------

  export default {
    name: "balance",
    components: { ChatItem, AgentItem },
    auth: "guest",
    data(){
      return {
        messageNum:0,
        tabCur:0,
        chatVisible:false,
        agentChatVisible:false,
        tabList:[
          {
            title:this.$t('page.merchant.delivery'),
            key:0
          },
          {
            title:this.$t('page.merchant.shipped'),
            key:1
          },
          {
            title:this.$t('page.merchant.completed'),
            key:2
          },
          {
            title:this.$t('page.merchant.productLibrary'),
            key:3
          },
          {
            title:this.$t('page.merchant.forSale'),
            key:4
          }
        ],
        drawer:false,
        drawerInfo: [
        {
          title: this.$t("page.merchant.detailsT1"),
          list: [
            {
              name: "real_name",
              title: this.$t("page.merchant.userNick"),
              value: "13199009933",
            },
            {
              name: "user_phone",
              title: this.$t("page.merchant.tel"),
              value: "13199009933",
            },
            {
              name: "user_address",
              title: this.$t("page.merchant.address"),
              value: "13199009933",
            },
          ],
        },
        {
          title: this.$t("page.merchant.detailsT2"),
          list: [
            {
              name: "order_sn",
              title: this.$t("page.merchant.orderId"),
              value: "13199009933",
            },
            {
              name: "real_mer_pay_money",
              title: this.$t("page.merchant.orderSum"),
              value: "13199009933",
            },
            {
              name: "pay_postage",
              title: this.$t("page.merchant.postage"),
              value: "13199009933",
            },
            {
              name: "coupon_price",
              title: this.$t("page.merchant.preferential"),
              value: "13199009933",
            },
            {
              name: "give_integral",
              title: this.$t("page.merchant.rewardPoints"),
              value: "13199009933",
            },
            {
              name: "create_time",
              title: this.$t("page.merchant.creationTime"),
              value: "13199009933",
            },
          ],
        },
      ],
        dialogVisible:false,
        palyPwd:'',
        tdOrderInfo:'',
        list:[],
        page:1,
        limit:10,
        total:0,
        userInfo:{},
        currentPage:1,
        category:[],
        currentCategory:'',
        categorizeList:[],
        keyword:'',
        price_low:'',
        price_high:'',
        allSelect:false,
        categorize:'',
        merchantLevel:'',
        mer_id:'',
        care_count:'',
        mer_credit:'',
        userUid:0,
        merchant_category_id:'',
        levelInfo:'',
        user_visit:'',
      }
    },
    watch:{
      categorize(){
        this.categorizeList = []
        const data = this.category.filter(item=>{
          if(item.value === this.categorize){
            return item.children
          }
        })
        data.forEach(item=>{
          item.children.forEach(childItem=>{
            this.categorizeList = [...this.categorizeList,...childItem.children]
          })
        })
      }
  },
    fetch({ store }) {
      store.commit("isBanner", false);
      store.commit("isHeader", true);
      store.commit("isFooter", true);
    },
    head() {
      return {
        title: this.$t('page.user.mybalance') + "-"+this.$store.state.titleCon
      }
    },
    async beforeMount() {
      this.getList();
      await this.getUserInfo();
      await this.getMessageNum();
      this.getLevelData()
    },
    methods:{
      getLevelData() {
        this.$axios.get('/api/merchant/categorylist',{params:{id:this.merchant_category_id}}).then(res=>{
          this.levelInfo = res.data[0]
        })
      },
      goCustomer(item) {
        this.userUid = item.uid
        this.chatVisible = true
      },
      async getMessageNum(){
        await this.$axios.get('/api/user/member/djlist').then(res=>{
          this.user_visit = res.data.user_visit
          this.mer_id = res.data.mer_id
          this.care_count = res.data.care_count
          this.messageNum = res.data.card_num
          this.merchantLevel = res.data.icon
          this.mer_credit = res.data.mer_credit
          this.merchant_category_id = res.data.category_id
        })
      },
      handleClose() {
        this.palyPwd= ''
        this.tdOrderInfo = ''
      },
      goMerDetail(info) {
        const obj = { 0: "待发货", 1: "待收货", 2: "待评价" };
        info.status = obj[info.status];
        this.drawerInfo.forEach((v, i) => {
          v.list.forEach((j, k) => {
            this.$set(this.drawerInfo[i].list[k], "value", info[j.name]);
          });
        });
        this.drawer = true
      },
      goTd(info) {
        if (this.userInfo.now_money < info.real_mer_pay_money) {
          this.$message.error(this.$t("page.index.insufficientbalance"))
          return;
        }
        this.tdOrderInfo = info
        this.dialogVisible = true
      },
      handtohuo() {
        const params= {
          order_id:this.tdOrderInfo.order_id,
          withdraw_pwd:this.palyPwd,
          txt:this.$t('page.merchant.deduction')
        }
        this.$axios.post("/api/user/member/goodslist_tidan",{...params}).then(res=>{
          this.getList();
          this.dialogVisible = false
        }).catch(err=>{
          this.$message.error(err)
        })

      },
      handleCategorize(value){
        this.categorize = value
        this.currentCategory = ''
        this.getList();
      },
      handleIds(value){
        this.currentCategory = value
        this.getList();
      },
      async getUserInfo() {
        await this.$axios.get("/api/user").then(res=>{
          this.userInfo = res.data;
        })
      },
      async bindTab(item) {
        this.tabCur= item.key;
        this.page = 1;
        this.currentPage = 1;
        if(this.tabCur === 3 || this.tabCur === 4){
          await this.getCategory()
        }
        this.getList();
      },
      // 查看详情
      goDetail(item){
        this.$router.push({
            path: `/order_detail`,
            query:{
                orderId:item.order_id
            }
        })
      },
      getList(){
        const params = {
          page:this.page,
          limit:this.limit
        }
        let url= ''
        if (this.tabCur === 0) {
          url = '/api/user/member/orderdfh'
        } else if (this.tabCur === 1) {
          url = '/api/user/member/orderyfh'
        } else if (this.tabCur === 2) {
          url = '/api/user/member/orderywc'
        } else if (this.tabCur === 3) {
          params.cate_id = this.currentCategory
          params.keyword = this.keyword
          if(this.price_low !==""){
            params.price_low= this.price_low
          }
          if(this.price_high !=""){
            params.price_high = this.price_high
          }
          url = '/api/user/member/goodslist_shang'
        } else if (this.tabCur === 4) {
          params.cate_id = this.currentCategory
          params.keyword = this.keyword
          if(this.price_low !==""){
            params.price_low= this.price_low
          }
          if(this.price_high !=""){
            params.price_high = this.price_high
          }
          url = '/api/user/member/goodslist_xia'
        }
        console.log("=====url============",url,params)
        if(this.tabCur < 3) {
          this.$axios.get(url,{ params }).then(res => {
            this.total = res.data.count || 0
            // if(this.tabCur === 2){
            //   res.data.list.map(item=>{
            //     let is_refund = 0
            //     if(item.orderProduct.forEach(orderProduct=>{
            //       if(orderProduct.is_refund !== 0){
            //         is_refund =
            //       }
            //     }))
            //     return {...item}
            //   })
            // }
            this.list = res.data.list

          })
        } else {
          this.$axios.get(url,{ params }).then(res=>{
            this.total = res.data.count || 0
            this.list = res.data.data
          })
        }

      },
      getCategory() {
        this.$axios.get("api/user/member/djclass").then(res => {
          this.category = res.data
        })
      },
      handleChange(){

      },
      isChecked(product_id) {
        return this.checkIds.includes(product_id)
      },
      selectAllChange(value){
        this.list = this.list.map(info=>({...info,checkbox:value}))
      },
      async batchListing(){
        const errIds = []
        const checkIds = []
        this.list.forEach(info => {
          if(info.checkbox){
            checkIds.push(info.product_id)
          }
        })
        let count = 0
        if(checkIds.length == 0) {
          Message.error(this.$t("page.merchant.selectGoods"))
          return
        }
        for (let id of checkIds) {
          await this.$axios.get('api/user/member/goodslist_status',{
          params:{id}
        }).then(res=>{
            count++;
          }).catch(()=>{
            console.log("----")
            errIds.push(id)
            count++;
          })
        }
        if(count === checkIds.length) {
          if(errIds.length === 0){
            Message.success(this.$t("message.login.operationSU"))
          } else {
            Message.error(this.$t('page.merchant.failed') + errIds.length)
          }
          this.list = [];
          this.page = 1;
          this.allSelect = false
          this.getList();
        }

      },
      async batchDelisting(){
        const errIds = []
        const checkIds = []
        this.list.forEach(info => {
          if(info.checkbox){
            checkIds.push(info.product_id)
          }
        })
        let count = 0
        if(checkIds.length == 0){
          Message.error(this.$t("page.merchant.selectGoods"))
          return
        }
        for (let id of checkIds) {
          await  this.$axios.get('api/user/member/goodslist_xiastatus',{
          params: {id}
        }).then(res=>{
            count++;
          }).catch(()=>{
            errIds.push(id)
            count++;
          })
        }
        if(count === checkIds.length){
          if(errIds.length === 0){
            Message.success(this.$t("message.login.operationSU"))
          } else {
            Message.error(this.$t('page.merchant.failed') + errIds.length)
          }
          this.list = [];
          this.allSelect = false
          this.page = 1;
          this.getList();
        }
      },

      handlebut(id, flag, type) {
        console.log('id',id)
        console.log('type',type)
        console.log('flag',flag)
        if(type==1) return
        if(flag === 1){
          this.$axios.get("api/user/member/goodslist_status",{
          params: {id}
        }).then((v) => {
            Message.success("Successful operation")
            this.list = [];
            this.page = 1;
            this.getList();
          });
        } else {
          this.$axios.get("api/user/member/goodslist_xiastatus",{
          params: {id}
        }).then((v) => {
            Message.success("Successful operation")
            this.list = [];
            this.page = 1;
            this.getList();
          });
        }

      },
      // 分页点击
      bindPageCur(data){
        this.page = data
        this.getList()
      }
    }
  }
</script>

<style lang="scss" scoped>
.ml-20{
  margin-left: 20px;
}
.user-com-title{position: relative;}
.user_recharge{
display: inline-block;
position: absolute;
float: right;
right: 20px;
color: blue;
cursor: pointer;
}
.user_reflect{
display: inline-block;
position: absolute;
float: right;
right: 80px;
color: blue;
cursor: pointer;
}
.balance-wrapper{
  .btn-box{
    padding: 10px;
    display: flex;
    align-items: center;
    .merchant_info{
      div{
        margin-right: 20px;
      }
      span{
        margin-right: 10px;
      }
    }
  }
.balance-box{
  padding-top: 45px;
  .flex{
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    .level-item{
        width: calc(calc(100% - 60px) / 3);
        margin-right: 20px;
        margin-bottom: 20px;
        text-align: center;
        padding: 20px;
        font-size: 14px;
        color: #666666;
        border-radius: 10px;
        box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.25);
        >div{
          padding: 5px;
        }
        .icon{
          width: 50px;
          height: 50px;
        }
      }
  }
  .money-box{
    display: flex;
    justify-content: flex-start;
    align-content: center;
    flex-wrap: wrap;
      .money-item{
        display: inline-block;
        width: 25%;
        margin:0 0 50px;
        span{
          color: #969696;
          font-size: 14px;
        }
        p{
          margin-top: 10px;
          color: #282828;
          font-size: 32px;
        }
      }
  }
  .tab-box{
    padding-right: 54px;
    margin-top: 35px;
    .hd{
      padding-bottom: 15px;
      border-bottom: 1px solid #ECECEC;
      .hd-item{
        position: relative;
        float: left;
        padding: 0 10px;
        margin-right: 30px;
        text-align: center;
        font-size: 16px;
        color: #999999;
        cursor: pointer;
        &.on{
          color: #E93323;
          &:after{
            content: ' ';
            position: absolute;
            left: 0;
            bottom: -16px;
            width:100%;
            height: 2px;
            background: #E93323;
          }
        }
      }
    }
    .bd{
      .bd-item{
        margin-top: 20px;
        .time{
          height: 36px;
          line-height: 36px;
          background: #F4F4F4;
          color: #969696;
          font-size: 14px;
          padding: 0 10px;
        }
        .list li{
          position: relative;
          padding: 18px 10px;
          border-bottom: 1px dashed #D0D0D0;
          .txt{
            color: #282828;
            font-size: 16px;
          }
          .txt-time{
            margin-top: 10px;
            color: #969696;
            font-size: 14px;
          }
          .num{
            position: absolute;
            right: 10px;
            top: 50%;
            margin-top: -8px;
            font-size: 16px;
            font-weight: bold;
            color: #E93323;
          }
          .green{
            color: #43B36D;
          }
        }
      }
    }
  }
}
}
.pages-box{
  padding-right: 54px;
  margin-top: 30px;
  text-align: right;
}

.order-list {
    li {
      position: relative;
      padding: 30px 0 26px;
      border-bottom: 1px solid #ECECEC;
      .refund-icon{
        position: absolute;
        right: 50px;
        top: 40px;
      }
      .bd {
        padding-right: 40px;
        border-bottom: 1px dashed #E1E1E1;
        cursor: pointer;
        .order-txt {
          color: #282828;
          font-size: 14px;
          .mer_name{
            display: inline-block;
            margin-left: 40px;
            color: #666666;
            &:hover{
              color: #E93323;
            }
          }
          .status {
            float: right;
            color: #E93323;
          }
        }
        .content {
          margin-top: 20px;
          .goods-item {
            display: flex;
            position: relative;
            margin-bottom: 20px;
            align-items: center;
            .checkbox{
              margin-right: 20px;
            }
            .img-box {
              width: 120px;
              height: 120px;
              position: relative;
              span {
                display: block;
                width: 100%;
                text-align: center;
                font-size: 12px;
                line-height: 18px;
                background: rgba(0,0,0,.5);
                position: absolute;
                left: 0;
                bottom: 0;
                color: #fff;
              }
              img {
                display: block;
                width: 100%;
                height: 100%;
              }
            }
            .info-txt {
              position: relative;
              display: flex;
              flex-direction: column;
              justify-content: center;
              width: 500px;
              margin-left: 24px;
              font-size: 14px;
              .info{
                font-size: 12px;
                color: #aaa;
                margin-top: 4px;
              }
              .price {
                margin-top: 10px;
                color: #E93323;
              }

            }
            .develity_date{
              color: #FD6523;
              margin-top: 6px;
              font-size: 14px;
            }
            .num {
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                color: #999999;
              }
          }
        }
      }
      .foot {
        padding-top: 26px;
        padding-right: 32px;
        p {
          text-align: right;
          color: #666;
          font-size: 14px;
          .price {
            color: #E93323;
          }
        }
        .btn-wrapper {
          display: flex;
          justify-content: flex-end;
          margin-top: 20px;
          div {
            width: 110px;
            height: 36px;
            text-align: center;
            line-height: 34px;
            margin-left: 20px;
            border: 1px solid #999999;
            border-radius: 4px;
            font-size: 14px;
            color: #666666;
            cursor: pointer;
            &.pay {
              border-color: #E93323;
              background: #E93323;
              color: #fff;
            }
          }
        }
      }
    }
  }
  .condition{
    margin: 20px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    .condition-price{
      margin-left:20px;
    }
    .ml-20{
      margin-left: 20px;
    }
    .input{
      width: 100px;
    }
  }
  .my-order-btn-box{
    .btn-box{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .btn{
        width: 93px;
        color: #fff;
        border-radius: 26px;
        font-size: 14px;
        margin-left: 10px;
      }
      .allSelect{
        line-height: 32px;
        margin-right: 25px;
      }
    }
  }
  .categorize-box{
	width: calc(100% - 130px);
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap:wrap;

	.categorize-item{
		padding: 10px 0px;
		font-size: 14px;
    width: 150px;
		flex-shrink:0;
    flex-grow:0;
		&.active{
			color: #e93323;
		}
	}
}
.bottom-categorize{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
  width: calc(100% - 130px);

	.classifier{
		flex-shrink:0;
    flex-grow:0;
		padding: 10px 0;
    width: 150px;
    font-size: 14px;
		&.active{
      color: #e93323;
		}
	}

}
.flex{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 20px;
  label{
    width: 100px;
    padding: 10px 0px;
    flex-shrink:0;
    flex-grow:0;
    display: inline-block;
  }
}
    /* 设置滚动条的样式 */
  ::-webkit-scrollbar {
    width: 2px;
    height: 2px;
  }

  /* 滚动槽 */
  ::-webkit-scrollbar-track {
    border-radius: 10px;
  }

  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    width: 2px;
    height: 2px;
    background-color: #0003;
    border-radius: 10px;
    transition: all .2s ease-in-out;
  }
  .drawer-box{
    padding: 20px;

    .detail_item {
      font-size: 12px;
      margin: 10px 0;
      .t1 {
        display: inline-block;
        width: 75px;
        text-align: right;
        margin-right: 10px;
        color: rgb(93, 93, 93);
      }
      .t2 {
        color: rgb(93, 93, 93);
      }
    }
    .mb-10{
      margin-bottom: 10px;
    }
  }
  .icon-img{
    width: 20px;
    height: 20px;
  }
</style>
